<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="couponRule" :model="couponForm" label-position="left" label-width="140px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="couponForm.title" />
      </el-form-item>
      <el-form-item label="适用产品">
        <el-radio v-model="couponForm.apply.value" label="1">全部</el-radio>
        <el-radio v-model="couponForm.apply.value" label="2">非折扣产品</el-radio>
        <el-radio v-model="couponForm.apply.value" label="3">指定产品</el-radio>
      </el-form-item>
      
      <el-form-item label="商品信息" prop="code" v-if="couponForm.apply.value == '3'">        
          <el-table
            key="waybillShopping"
            :data="couponForm.product"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            >
            <el-table-column label="产品" min-width="200">
              <template slot-scope="{row}">
                <el-input readonly="readonly" v-model="row.productName" />
              </template>
            </el-table-column>
            <el-table-column label="图片" min-width="100px">
              <template slot-scope="{row}">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="row.logo"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button size="mini" type="danger" @click="handleDelete(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
            <el-button type="primary" @click="newProduct()">
              添加产品
            </el-button>

      </el-form-item>
      
      
      <el-form-item label="不可用产品" prop="code">        
          <el-table
            key="waybillShopping"
            :data="couponForm.product"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            >
            <el-table-column label="产品" min-width="200">
              <template slot-scope="{row}">
                <el-input readonly="readonly" v-model="row.productName" />
              </template>
            </el-table-column>
            <el-table-column label="图片" min-width="100px">
              <template slot-scope="{row}">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="row.logo"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button size="mini" type="danger" @click="handleDelete(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
            <el-button type="primary" @click="newProduct()">
              添加产品
            </el-button>

      </el-form-item>
      <el-form-item label="类型">
        <el-radio v-model="couponForm.style.value" label="1">现金卷</el-radio>
        <el-radio v-model="couponForm.style.value" label="2">折扣卷</el-radio>
        <el-radio v-model="couponForm.style.value" label="3">兑换卷</el-radio>
      </el-form-item>
      <el-form-item label="金额" v-if="couponForm.style.value == '1'">
        <el-input v-model="couponForm.amount" />
      </el-form-item>
      <el-form-item label="折扣" v-if="couponForm.style.value == '2'">
        <el-input v-model="couponForm.discount" />
      </el-form-item>
      <el-form-item label="发行规模">
        <el-input v-model="couponForm.quantity" />
      </el-form-item>
      <el-form-item label="有效期">
        <el-date-picker 
          v-model="couponForm.begin_time"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始日期"
          align="right"
        />
        <el-date-picker 
          v-model="couponForm.end_time"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始日期"
          align="right"
        />
      </el-form-item>
      <el-form-item label="介绍">
        <el-input v-model="couponForm.content" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="介绍" />
      </el-form-item>
      <el-form-item label="使用条件">
        <el-row :gutter="20">
          <el-col :span="2"><el-radio v-model="couponForm.restrict" label="1">满</el-radio></el-col>
          <el-col :span="8">
            <el-input v-model="couponForm.restrict_amount" placeholder="">
              <template slot="append">元使用</template>
            </el-input>
          </el-col>
          <el-col :span="12"><el-radio v-model="couponForm.restrict" label="2">无条件使用</el-radio></el-col>
        </el-row>

      </el-form-item>

      <el-form-item label="领卷时间">
        <el-date-picker 
          v-model="couponForm.receive_begin_time"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始日期"
          align="right"
        />
        <el-date-picker 
          v-model="couponForm.receive_end_time"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始日期"
          align="right"
        />
      </el-form-item>
      <el-form-item label="叠加使用">
        <el-radio v-model="couponForm.overlay.value" label="1">允许</el-radio>
        <el-radio v-model="couponForm.overlay.value" label="2">禁止</el-radio>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="couponForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
      <el-button type="primary" @click="createData()">
        确认
      </el-button>
      <el-button v-if="couponForm.status.value === 5" type="danger" @click="handleDelete(temp)">
        删除
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveCoupon, removeCouponById, getCoupon } from '@/api/promotion/coupon'
import waves from '@/directive/waves' // waves directive
import { } from '@/utils'

export default {
  name: 'ComplexTable',
  components: { },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      tableKey: 0,
      couponForm: {
        title: '',
        discount: '',
        apply:{
          value:"1"
        },
        applyProductIDs:[],
        restrict: "1",
        overlay: {
          label: '允许',
          value: "1"
        },
        restrict_amount: '',
        status: {
          label: '',
          value: 1
        },
        style: {
          label: '',
          value: "1"
        },
        begin_time: '',
        end_time: '',
        quantity: ''
      },
      couponRule: {}
    }
  },
  created() {
    let couponId = this.$route.query && this.$route.query.couponId
    if (couponId !== undefined) {
      couponId = parseInt(couponId)
      if (!isNaN(couponId)) {
        this.listLoading = true
        const formData = {
          'couponId': couponId
        }
        getCoupon(formData).then(response => {
          if (response.status === 200) {
            this.couponForm = response.data
            this.couponForm.overlay.value = String(this.couponForm.overlay.value)
            this.couponForm.style.value = String(this.couponForm.style.value)
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    }
    console.log(couponId)
  },
  methods: {
    handleCannel() {
      this.$router.push({ path: 'coupon' })
    },
    createData() {
      const _couponForm = this.couponForm
      _couponForm.status = _couponForm.status.value
      _couponForm.style = _couponForm.style.value
      if (_couponForm.identity > 0) {
        _couponForm.couponId = _couponForm.identity
      }
      saveCoupon(_couponForm).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          this.$router.push({ path: 'coupon' })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    },
    handleDelete(row, index) {
      const _this = this
      const formData = {
        'couponId': row.identity
      }
      console.log(index)
      removeCouponById(formData).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          _this.$router.push({ path: 'coupon' })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
